<template>
    <div class="app-container">
        <div class="head-container">
            <!-- 搜索 -->
            <el-input v-model="listQuery.Filter" clearable size="small" placeholder="搜索..." style="width: 200px;"
                class="filter-item" @keyup.enter.native="handleFilter" />
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="handleFilter">搜索
            </el-button>
            <div style="padding: 6px 0">
                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handleCreate">新增
                </el-button>
                <el-button class="filter-item" size="mini" type="success" icon="el-icon-edit" @click="handleUpdate()">修改
                </el-button>
                <el-button slot="reference" class="filter-item" type="danger" icon="el-icon-delete" size="mini"
                    @click="handleDelete()">删除</el-button>
                <el-button class="filter-item" type="warning" icon="el-icon-s-check" size="mini"
                    @click="handleCheck()">审核</el-button>
            </div>
        </div>
        <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="cancel()" :title="formTitle">
            <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
                <h2>基本信息</h2>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="产品名称" prop="pName">
                            <el-input v-model="form.pName" placeholder="请输入名称" clearable></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品编号" prop="pNum">
                            <el-input v-model="form.pNum" placeholder="保存后自动生成" :disabled="true">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属类别" prop="ptId">
                            <el-input v-model="form.ptId" placeholder="所属类别" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="单位" prop="pUnit">
                            <el-input v-model="form.pUnit" placeholder="请输入名称" clearable></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="规格型号" prop="skuId">
                            <el-input v-model="form.skuId" placeholder="请输入描述" clearable>
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单价" prop="price">
                            <el-input v-model="form.price" placeholder="请输入描述" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="产品说明" prop="desc">
                            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"
                                v-model="form.desc">
                            </el-input>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form ref="form" :model="form.pic" label-width="100px">
                            <el-form-item>
                                <el-upload class="avatar-uploader" action="http://localhost:51186/api/business/product"
                                    :show-file-list="false" :on-success="handleAvatarSuccess">
                                    <div style="width: 200px;height: 150px;">
                                        <img v-if="form.pic" :src="form.pic" class="avatar"
                                            style="width: 200px;height: 150px;" />
                                    </div>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                        <el-form-item>

                        </el-form-item>
                    </el-col>
                </el-row>
                <h2>角色信息</h2>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="是否为实体">
                            <el-radio-group v-model="form.isSta">
                                <el-radio :label="true" :value="true">是</el-radio>
                                <el-radio :label="false" :value="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否含税">
                            <el-radio-group v-model="form.isMon">
                                <el-radio :label="true" :value="true">是</el-radio>
                                <el-radio :label="false" :value="false">否</el-radio>
                            </el-radio-group>


                        </el-form-item>


                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品属性">

                            <el-checkbox-group v-model="form.proSexArr">
                                <el-checkbox label="自制"></el-checkbox>
                                <el-checkbox label="委外"></el-checkbox>
                                <el-checkbox label="外购"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="主供应商">
                            <el-input v-model="form.sid" placeholder="请输入名称" clearable></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="安全库存">

                            <el-input-number style="width: 150px" v-model="form.saft" controls-position="right"
                                @change="handleChange" :min="1" :max="10"></el-input-number>

                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="库存下限">
                            <el-input-number style="width: 150px" v-model="form.down" controls-position="right"
                                @change="handleChange" :min="1" :max="10"></el-input-number>

                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="库存上限">
                            <el-input-number style="width: 150px" v-model="form.upDown" controls-position="right"
                                @change="handleChange" :min="1" :max="10"></el-input-number>

                        </el-form-item>

                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="损耗率(%)">
                            <el-input-number style="width: 150px" v-model="form.badCha" controls-position="right"
                                @change="handleChange" :min="1" :max="10"></el-input-number>

                        </el-form-item>

                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="产品有效期(天)">
                            <el-input-number style="width: 150px" v-model="form.exDay" controls-position="right"
                                @change="handleChange" :min="1" :max="10"></el-input-number>

                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="养护周期">
                            <el-input v-model="form.productWeek" placeholder="请输入描述" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="二维码图片">
                            <el-input v-model="form.txPic" placeholder="保存后自动生成" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>

            <div slot="footer">
                <el-button size="small" type="text" @click="cancel">取消</el-button>
                <el-button size="small" v-loading="formLoading" type="primary" @click="save">确认</el-button>
            </div>
        </el-dialog>


        <el-table ref="multipleTable" v-loading="listLoading" :data="list" size="small" style="width: 90%;"
            @sort-change="sortChange" @selection-change="handleSelectionChange" @row-click="handleRowClick">
            <el-table-column type="selection" width="44px"></el-table-column>
            <el-table-column label="名称" prop="pName" align="center" />
            <el-table-column label="产品编号" prop="pNum" align="center" />
            <el-table-column label="价格" prop="price" align="center" />
            <el-table-column label="流程节点" prop="nodeStatus" align="center">
                <template slot-scope="{row}">
                    <span class="link-type" @click="findFlow(row)">{{ row.nodeStatus }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleUpdate(row)" icon="el-icon-edit" />
                    <el-button type="danger" size="mini" @click="handleDelete(row)" icon="el-icon-delete" />
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="totalCount > 0" :total="totalCount" :page.sync="page" :limit.sync="listQuery.MaxResultCount"
            @pagination="getList" />
    </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import { cloneDeep } from "lodash";

const defaultForm = {
    //   name: null,
    //   description: null,
    //   price: 0,
    //     status: 0,
    id: null,
    pName: null,
    pNum: null,
    ptId: "629da304-9863-bfc0-933d-3a1288802a01",
    pUnit: null,
    skuId: null,
    price: null,
    desc: null,
    pic: "",
    isSta: true,
    isMon: true,
    proSX: "",
    proSexArr: [],
    sid: "284f1f40-7eea-1271-efb5-3a1289063803",
    saft: 0,
    down: 0,
    upDown: 0,
    badCha: 0,
    exDay: 0,
    productWeek: "",
    txPic: null

}
export default {
    name: 'Book',
    components: {
        Pagination
    },
    directives: {
        permission
    },
    //上传图片
    data() {
        return {
            list: [],
            form: {},
            menuData: [],
            menus: [],
            imageUrl: '',
            treeLoading: false,
            defaultProps: {
                children: "children",
                label: "label",
                value: "value"
            },
        };
    },
    methods: {
        getMenuData() {
            this.treeLoading = true;
            this.$axios.gets("/api/business/productsType/menu-item-list").then((response) => {
                this.menuData = response;
                //this.menus = response.items.filter((_) => _.pid == null);
                //this.setChildren(this.menus, response.items);
                this.treeLoading = false;
                this.menus = response.items;
                console.log(response.items);
            });
        },
        handleNodeClick(data) {
            console.log(data);
        },
        handleAvatarSuccess(val) {
            alert(1)
            this.form.pic = "http://localhost:51186/images/" + val;
            console.log(this.form.pic);
        },
        delpic() {
            this.form.pic = "";
        },
        form: {
            pic: "",
        },

    },



    props: [],
    data() {
        return {
            rules: {
                name: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }],
                description: [{
                    required: true,
                    message: '请输入描述',
                    trigger: 'blur'
                }],
                price: [{
                    required: true,
                    message: '价格',
                    trigger: 'blur'
                }],
            },
            form: Object.assign({}, defaultForm),
            list: [],
            totalCount: 0,
            listLoading: true,
            formLoading: false,
            listQuery: {
                Filter: '',
                Sorting: '',
                SkipCount: 0,
                MaxResultCount: 10
            },
            page: 1,
            dialogFormVisible: false,
            multipleSelection: [],
            formTitle: '',
            isEdit: false,
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getList();
        this.getMenuData();
    },
    mounted() { },
    methods: {
        getListStatus(items, ids) {
            this.$axios.posts('api/business/workflow/node-status', ids).then(response => {
                items.forEach(element => { response.items.filter((i) => { if (i.entityId === element.id) { element.status = i.status; element.nodeId = i.nodeId; element.nodeStatus = i.nodeName } }) })
                this.list = items
                this.listLoading = false;
            });
        },
        getList() {
            this.listLoading = true;
            this.listQuery.SkipCount = (this.page - 1) * this.listQuery.MaxResultCount;
            this.$axios.gets('/api/business/products/product', this.listQuery).then(response => {
                this.list = response.items;
                this.totalCount = response.totalCount;
                this.getListStatus(response.items, response.items.map(_ => _.id))
            });
        },
        fetchData(id) {
            this.$axios.gets('/api/business/product/' + id).then(response => {
                this.form = response;
            });
        },
        handleFilter() {
            this.page = 1;
            this.getList();
        },
        handleCreate() {
            this.formTitle = '新增图书';
            this.isEdit = false;
            this.dialogFormVisible = true;
        },
        handleDelete(row) {
            var params = [];
            let alert = '';
            if (row) {
                params.push(row.id);
                alert = row.pName;
            }
            else {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        message: '未选择',
                        type: 'warning'
                    });
                    return;
                }
                this.multipleSelection.forEach(element => {
                    let id = element.id;
                    params.push(id);
                });
                alert = '选中项';
            }
            this.$confirm('是否删除' + alert + '?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.deletes('/api/business/products/delete?ids=' + params).then(response => {
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.getList();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleCheck() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    message: '未选择',
                    type: 'warning'
                });
                return;
            }
            if (this.multipleSelection.length > 1) {
                this.$message({
                    message: '暂不支持批量审核',
                    type: 'warning'
                });
                return;
            }
            this.$confirm('是否审核所选项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.puts('api/business/workflow/do/' + this.multipleSelection[0].id, { data: JSON.stringify(this.multipleSelection[0]) }).then(response => {
                    this.$notify({
                        title: '成功',
                        message: '审核成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.getList();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消审核'
                });
            });
        },
        findFlow(row) {
            this.$router.push({ path: "/tool/flowDisplay/" + row.nodeId });
        },
        handleUpdate(row) {
            this.formTitle = '修改图书';
            this.isEdit = true;
            if (row) {
                this.fetchData(row.id);
                this.dialogFormVisible = true;
            }
            else {
                if (this.multipleSelection.length != 1) {
                    this.$message({
                        message: '编辑必须选择单行',
                        type: 'warning'
                    });
                    return;
                }
                else {
                    this.fetchData(this.multipleSelection[0].id);
                    this.dialogFormVisible = true;
                }
            }
        },
        save() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    this.form.roleNames = this.checkedRole;
                    if (this.isEdit) {
                        form.proSX = this.form.proSexArr.join(',');
                        this.$axios.posts('/api/business/products/data-post', this.form).then(response => {
                            this.formLoading = false;
                            this.$notify({
                                title: '成功',
                                message: '更新成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.dialogFormVisible = false;
                            this.getList();
                        }).catch(() => {
                            this.formLoading = false;
                        });
                    }
                    else {
                        this.$axios.posts('/api/business/products/data-post', this.form).then(response => {
                            this.formLoading = false;
                            this.$notify({
                                title: '成功',
                                message: '新增成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.dialogFormVisible = false;
                            this.getList();
                        }).catch(() => {
                            this.formLoading = false;
                        });
                    }
                }
            });
        },
        sortChange(data) {
            const {
                prop,
                order
            } = data;
            if (!prop || !order) {
                this.handleFilter();
                return;
            }
            this.listQuery.Sorting = prop + ' ' + order;
            this.handleFilter();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleRowClick(row, column, event) {
            this.$refs.multipleTable.clearSelection();
            this.$refs.multipleTable.toggleRowSelection(row);
        },
        cancel() {
            this.form = Object.assign({}, defaultForm);
            this.dialogFormVisible = false;
            this.$refs.form.clearValidate();
        },
    }
}

</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
